<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.min.js"></script>
</head>
<body>
    <script>
        var vd = [
            {tag: 'div', props: {style: {width:'400px',height:'400px'}, class: 'box', },children: [
                {tag: 'div', props: {style: {width:'200px',height:'200px',background:'red'}, class: 'box1'}}
            ]}]
        function vdi(vd,vnode) {
            console.log(1)
            vd.forEach(it => {
                var VNode = document.createElement(it.tag)
                var props = it.props
                handleProps(it.props,VNode)
                if(it.children && it.children.length > 0){
                    var arr = it.children
                    vdi(arr,VNode)
                }
                if(!!vnode){
                    vnode.appendChild (VNode)
                } else {
                    document.body.appendChild(VNode)
                }
            })
        }
        function handleProps(props,vnode) {
            
        }
        vdi(vd)
    </script>
</body>
</html>